import { useCallback } from "react";
import { memo, useState } from "react";
// useCallback 并不是要把所有得函数缓存，通常父组件给子组件传递参数为函数时参数使用缓存并且需要结合React.memo使用
let Child = memo((props)=>{
    let [msg,setMsg]= useState("学习使我快乐")
    let [num,setNum] = useState(0)
    return (
        <div>
            <h2>子组件 --{num}---{props.num}</h2>
            {props.getMsg(msg)}
            <button onClick={()=>{
                setNum(num+1)
                setMsg("哈哈哈")
            }}>++</button>
        </div>
    )
})

function App(){
    let [num,setNum] = useState(100)
    let getMsg = useCallback((msg)=>{
        console.log(msg)
        console.log(num)
    },[])
    return (
        <div>
            <h1>useCallback使用场景</h1>
            <Child getMsg={getMsg} num={num}/>
            <button onClick={()=>{
                setNum(num+100)
            }}> +100</button>
        </div>
    )
}

/* 
useCallback 和 useMemo 区别：
1. 都是用来做缓存得。
2. useCallback缓存得是函数 而useMemo缓存得是计算逻辑
3. 都可以用来做React性能优化
*/

export default App;